<template>
    <div class="logo-ask">
        <div class="svg-body">
            <svg class="svg-box" viewBox="0 0 160 100">
                <g transform="translate(0,-20)">
                    <template v-for="i in 10" :key="i">
                        <g
                            class="shadow-group"
                            clip-path="url(#clip0_4:5)"
                            :style="'opacity: '+ (.8 - i * .06) +'' "
                            :transform="'rotate(-8 53 100) translate(-14 '+ (35 + .7 * i) +') skewX(20) scale(1 0.5)'">
                            <path class="letter-a" d="M31.64 67.12C31.6 67.04 31.58 66.98 31.58 66.94C31.06 65.3 30.8 62.74 30.8 59.26V59.02C30.8 58.18 30.62 57.76 30.26 57.76C28.66 57.76 27.86 58.22 27.86 59.14L28.1 61.9C28.1 62.14 27.84 62.9 27.32 64.18C26.8 65.46 26.54 66.48 26.54 67.24C26.54 68 26.64 68.38 26.84 68.38C27.2 68.38 27.74 68.26 28.46 68.02C29.18 67.74 29.88 67.6 30.56 67.6C31.28 67.6 31.64 67.44 31.64 67.12ZM20.24 54.4L19.46 50.92C19.46 50.56 20.98 49.56 24.02 47.92C27.1 46.24 28.92 45.34 29.48 45.22C30.04 45.1 31.06 45.04 32.54 45.04C34.02 45.04 35.4 45.18 36.68 45.46C39.4 46.06 40.76 46.64 40.76 47.2C40.76 47.24 40.66 47.76 40.46 48.76C39.82 51.88 39.5 54.36 39.5 56.2C39.5 56.4 39.7 56.56 40.1 56.68C40.5 56.76 40.7 56.82 40.7 56.86C40.7 58.14 41.08 62.02 41.84 68.5C42.64 74.94 43.32 79 43.88 80.68V80.74C43.88 80.82 43.56 81.08 42.92 81.52C42.32 81.96 42.02 82.44 42.02 82.96C42.02 83.48 42.32 83.84 42.92 84.04C43.56 84.24 44.18 84.4 44.78 84.52C45.38 84.6 45.68 84.8 45.68 85.12C45.64 85.2 45.62 85.34 45.62 85.54C45.62 85.74 45.68 86.1 45.8 86.62C45.92 87.42 46.4 88.48 47.24 89.8L47.6 90.4C47.6 91.08 46.46 91.8 44.18 92.56C41.94 93.36 40.26 93.76 39.14 93.76C38.06 93.76 36.98 93.54 35.9 93.1C34.86 92.7 34 92.26 33.32 91.78C32.68 91.3 32.36 90.96 32.36 90.76C32.36 90.72 32.4 90.5 32.48 90.1C32.68 89.1 32.78 88.02 32.78 86.86L31.46 78.64C31.46 78.48 31.82 78.34 32.54 78.22C33.26 78.1 33.62 77.84 33.62 77.44C33.62 76.92 33.32 76.48 32.72 76.12C32.12 75.76 31.38 75.58 30.5 75.58C29.66 75.58 28.64 75.8 27.44 76.24C26.28 76.68 25.6 77.1 25.4 77.5C25.24 77.86 24.96 79.64 24.56 82.84C24.16 86 23.96 88.36 23.96 89.92C23.96 90.24 22.9 90.68 20.78 91.24C18.66 91.8 16.9 92.08 15.5 92.08C14.78 92.08 13.6 91.56 11.96 90.52L11.18 90.04C11.06 89.92 11 89.74 11 89.5V89.38C11.6 88.62 12.32 87 13.16 84.52L13.64 83.2C14.16 83.2 14.76 82.9 15.44 82.3C16.16 81.66 16.52 81.22 16.52 80.98C16.52 80.7 16.3 80.28 15.86 79.72C15.42 79.12 15.2 78.76 15.2 78.64V78.58L17.42 73.06C17.42 72.18 17.88 69.08 18.8 63.76C19.76 58.44 20.24 55.32 20.24 54.4Z"/>
                            <path class="letter-s" d="M64.0504 50.4473C63.9575 50.3714 63.9546 50.059 64.0415 49.5101C64.1538 48.9303 64.0396 48.5012 63.6989 48.2227C63.3892 47.9696 62.8305 47.9262 62.0229 48.0927C61.2462 48.2845 60.7495 48.2917 60.5327 48.1146C58.4576 46.4185 56.7386 44.7293 55.3756 43.047C53.9873 41.3957 53.1381 40.1592 52.8281 39.3375L52.3166 38.0671C52.2827 37.7294 52.8506 36.5921 54.0204 34.6552C55.2465 32.7126 56.4418 31.029 57.6063 29.6044C57.7834 29.3876 58.8205 29.3828 60.7176 29.5901L61.6632 29.6657C62.1501 29.702 63.089 30.1335 64.4797 30.9603C64.5106 30.9856 64.4249 31.1221 64.2224 31.3699L63.3405 32.354L62.1183 36.3144C62.1972 36.5339 62.562 37.1937 63.2127 38.2938C63.9196 39.3882 64.5054 40.1253 64.97 40.505C65.8062 41.1885 67.0474 41.3764 68.6937 41.0688C70.3962 40.7556 71.412 40.3976 71.7411 39.995C72.3234 39.2827 72.6647 38.0118 72.7651 36.1824L72.8406 35.2367C71.7441 31.9642 70.9636 30.138 70.4991 29.7583C69.815 29.4575 69.3801 29.2312 69.1942 29.0793C69.0394 28.9527 68.959 28.577 68.953 27.9522C68.9781 27.3528 69.0412 26.9911 69.1425 26.8672L70.6068 25.7393C70.8093 25.4915 70.6613 25.0089 70.1628 24.2915L68.6722 23.4606C68.3315 23.1822 68.19 21.775 68.2479 19.2392C68.3367 16.7288 68.5076 15.3187 68.7608 15.009C69.0139 14.6992 69.8481 14.0895 71.2633 13.1797C72.7094 12.2953 74.5622 11.3558 76.8217 10.3611C79.1064 9.33556 81.1212 8.73508 82.8661 8.55971C83.8709 8.65771 85.3022 9.18187 87.1602 10.1322C89.0492 11.1078 90.8918 12.3298 92.6881 13.798C92.5311 15.0645 92.8398 16.0142 93.6141 16.6471C94.5486 16.8943 95.3323 16.6307 95.9651 15.8565C96.041 15.7635 96.59 16.1348 97.6121 16.9701C99.6562 18.6408 100.463 19.7395 100.033 20.266C99.6333 20.8178 99.0666 21.5428 98.3325 22.4409C97.5984 23.3391 96.9979 24.0106 96.5309 24.4555C95.6565 26.2206 95.1054 27.2425 94.8776 27.5213L94.8396 27.5677C94.35 27.7875 93.4593 27.8344 92.1674 27.7084C90.9009 27.5514 90.1592 27.3843 89.9424 27.2071C89.7566 27.0552 89.7016 26.9328 89.7776 26.8399C90.2332 26.2824 90.2368 25.0455 89.7884 23.1291C89.3962 21.2071 88.7046 19.8411 87.7135 19.031C87.1251 18.5501 85.9331 18.4282 84.1376 18.6655C82.3675 18.8719 81.204 19.3157 80.6471 19.9971C80.1691 20.8979 80.1778 21.5509 80.6734 21.9559C80.9521 22.1837 81.4165 22.2792 82.0666 22.2423L82.1131 22.2802C82.3918 22.5081 82.8625 23.7968 83.525 26.1465C84.2439 28.4905 84.5359 29.8399 84.401 30.1946C84.8232 30.4364 85.1583 30.6586 85.406 30.8611C85.6848 31.0889 85.8608 31.2844 85.934 31.4476C86.1964 32.6436 86.3125 34.0817 86.2824 35.7619C86.2776 37.4111 86.2105 38.4412 86.0813 38.8522C85.452 41.0759 83.6438 44.015 80.6568 47.6696C79.7455 48.7846 76.9836 49.7302 72.3712 50.5065C67.8151 51.2771 65.0415 51.2574 64.0504 50.4473Z"/>
                            <path class="letter-k" d="M129.423 41.9935L127.486 47.6181C127.812 47.8398 127.953 48.0688 127.911 48.3049L127.846 48.6591L126.344 52.899C126.337 52.9384 126.307 52.9938 126.253 53.0654L126.017 54.3642C125.867 55.6379 125.857 56.3677 125.986 56.5537C126.444 57.1654 126.752 57.4856 126.909 57.5141C127.066 57.5427 127.145 57.557 127.145 57.557C127.152 57.5177 127.199 57.4855 127.285 57.4604C127.378 57.396 127.927 56.4997 128.932 54.7714C129.983 53.0109 130.598 52.086 130.777 51.9965C130.963 51.8677 131.315 51.83 131.834 51.8836C132.392 51.9443 132.764 51.9102 132.95 51.7814C133.265 51.3913 133.448 51.0586 133.498 50.7831L133.245 49.1517C133.252 49.1123 133.256 49.0927 133.256 49.0927C133.295 49.0998 133.318 49.0837 133.326 49.0443C135.261 46.6719 136.484 44.8613 136.995 43.6126C137.07 43.423 138.176 43.1562 140.311 42.8123C142.447 42.4684 143.633 42.3178 143.869 42.3607C144.106 42.4036 144.304 42.5413 144.465 42.7738C144.666 43.0135 144.864 43.1512 145.061 43.1869L146.51 43.2671C146.667 43.2957 147.109 43.6605 147.836 44.3616C148.609 45.0305 148.981 45.4436 148.952 45.601C148.924 45.7585 148.468 46.1432 147.584 46.7551C146.74 47.3743 146.264 47.7554 146.157 47.8985C145.513 48.7573 144.955 49.1438 144.483 49.0581C144.071 48.8614 143.826 48.7559 143.747 48.7416C142.842 49.0244 142.361 49.3233 142.304 49.6381C142.247 49.953 142.288 50.2857 142.428 50.6363C142.607 50.994 142.685 51.2319 142.664 51.35C142.65 51.4287 142.36 51.681 141.795 52.1068C139.938 53.5991 138.706 54.6763 138.098 55.3383C135.565 58.0901 134.263 59.6628 134.192 60.0563C134.163 60.2138 135.221 60.9953 137.364 62.4009C138.198 62.9588 138.883 63.7744 139.42 64.8476C140.003 65.8886 140.184 67.0191 139.963 68.2391C139.884 68.672 139.866 69.2176 139.909 69.8759C139.96 70.4949 139.953 70.9814 139.888 71.3356C139.831 71.6505 139.593 71.9529 139.175 72.2427C138.699 72.8475 138.436 73.2876 138.386 73.5631C138.307 73.996 138.866 74.5039 140.061 75.0868C140.182 75.3122 140.138 76.3408 139.927 78.1726C139.724 79.9651 139.529 81.373 139.343 82.3962C140.639 85.1114 141.244 86.7052 141.158 87.1775C141.087 87.571 139.801 88.0489 137.3 88.6112C134.839 89.1805 133.332 89.4152 132.781 89.3151C132.23 89.2151 131.365 88.8342 130.184 88.1726C129.003 87.511 128.296 87.0371 128.064 86.7509C127.742 86.2859 127.673 84.8709 127.859 82.506L127.955 81.3039L127.966 81.2449C127.973 81.2055 128.245 81.0516 128.781 80.7832C129.318 80.5147 129.64 80.0853 129.747 79.495C129.854 78.9046 129.396 78.5166 128.373 78.3307L128.255 78.3093C128.019 78.2664 127.987 77.7727 128.158 76.8281L128.201 76.592L128.753 71.2039C128.846 70.6922 128.949 70.3452 129.064 70.1627L129.096 69.9856C129.21 69.3559 128.92 68.4901 128.226 67.3883C127.532 66.2866 126.692 65.6463 125.709 65.4677C125.472 65.4248 125.104 65.6628 124.603 66.1816C124.102 66.7005 123.834 67.0583 123.798 67.2551C123.77 67.4125 123.952 67.7506 124.346 68.2693C124.786 68.7558 124.985 69.1171 124.942 69.3532C124.906 69.55 124.777 69.8112 124.556 70.1368C124.334 70.4624 124.116 71.2156 123.901 72.3963L123.859 72.6324C123.773 73.1047 123.839 73.5233 124.057 73.8881C124.283 74.2137 124.381 74.4551 124.353 74.6126C124.324 74.77 124.186 74.9686 123.94 75.2083C123.739 75.4159 123.464 75.5895 123.113 75.7291C122.788 75.9545 122.575 76.3428 122.475 76.8938L122.432 77.1299C122.418 77.2086 122.543 77.4143 122.808 77.747C123.119 78.0474 123.261 78.2764 123.232 78.4338L123.221 78.4928C123.057 78.9508 122.917 79.4947 122.803 80.1244L122.192 84.831C122.128 85.1852 121.513 85.4393 120.346 85.5934C119.18 85.7475 118.094 86.0178 117.089 86.4045C116.084 86.7911 115.168 86.9093 114.341 86.7592C113.515 86.6091 112.434 86.0674 111.1 85.1339C109.758 84.2397 109.126 83.5762 109.205 83.1433L111.194 76.5527C111.298 76.2056 111.421 75.6386 111.564 74.8514L112.309 69.7423C112.338 69.5849 112.699 69.3862 113.393 69.1464C114.134 68.8743 114.543 68.5218 114.622 68.0889C114.7 67.656 114.409 67.1355 113.747 66.5274C113.092 65.88 112.775 65.4972 112.797 65.3792C113.297 62.6242 113.992 59.8031 114.882 56.9157L115.327 55.472C114.991 54.6384 115.069 52.8639 115.562 50.1483C115.57 50.1089 115.722 50.0552 116.019 49.9872C116.362 49.8869 116.559 49.6991 116.609 49.4236C116.845 48.1248 116.828 46.7599 116.56 45.3289C116.33 43.905 116.248 43.016 116.312 42.6618C116.384 42.2682 117.425 41.6848 119.435 40.9116C121.485 40.1455 122.884 39.8304 123.632 39.9662L126.916 40.6846C128.644 41.2424 129.48 41.6787 129.423 41.9935Z"/>
                        </g>
                    </template>
                </g>
                <defs>
                    <clipPath id="clip0_4:5">
                        <rect width="160" height="100" fill="white"/>
                    </clipPath>
                </defs>
            </svg>
            <div class="svg-overlay"></div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    name: 'Logo'
});
</script>
<style lang="scss" scoped>
$a-duration: 8s;
.logo-ask{
    position: relative;
    width: 100%;
    padding: 25% 0;
    background: radial-gradient(circle at 10% 20%, rgb(0, 95, 104) 0%, rgb(15, 156, 168) 90%);
    .svg-body{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        .svg-overlay{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.1) 10%, rgba(0,0,0,.8) 90%);
        }
        .svg-box{
            width: 100%;
            height: 100%;
        }
        .shadow-group{
            .letter-a,
            .letter-s,
            .letter-k{
                fill: none;
                stroke-width: 2px;
                stroke: $primary--color-0;
                animation-name: logoSvgBottomReset, logoSvgBottomResetLocation;
                animation-duration: $a-duration, $a-duration;
                animation-iteration-count: 1, 1;
                animation-fill-mode: both;
                animation-delay: 0s, 0s;
                transform: translate(0, 0);
                opacity: 0;
            }
            @for $i from 1 through 10 {
                &:nth-child(#{$i}){
                    .letter-a,
                    .letter-s,
                    .letter-k{
                        animation-delay: 0s, #{ (10 - $i) * 0.1 }s;
                    }
                }
            }
        }
    }
}
@keyframes logoSvgBottomReset {
    0%,20%{
        opacity: 0;
    }
    30%,
    85%{
        opacity: 1;
    }
    95%,
    100%{
        opacity: 1;
    }
}
@keyframes logoSvgBottomResetLocation {
    0%,25%{
        transform: translate(0, 0);
    }
    30%,
    55%{
        transform: translate(0, 5px);
    }
    60%,
    100%{
        transform: translate(0, 5px);
    }
}
</style>
